<template>
  <div class="mainbox">
    <h2 class="title01">培育植物</h2>
    <div class="headerbox">
      <el-scrollbar>
        <div v-if="!isplants">当前没有培育植物</div>
        <div class="scrollbar-flex-content" v-if="isplants">
          <div
            v-for="(item, i) in plants"
            :key="item.name"
            :class="selected == i ? 'plantactive' : ''"
            class="scrollbar-demo-item"
            @click="changeplant(item.name, i)"
          >
            <svg
              t="1736257431687"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="7610"
              width="200"
              height="200"
            >
              <path
                d="M811.1 488H533V256.9c0 0.4 2.3 1 3.5 1.2 5 0.8 28.2 1.1 56.5 1.1 33.6 0 74.5-6.2 101.7-27.2h0.2c50.5-22 66.3-127.8 68-138.5 1.8-11.6-6.1-20.9-17.7-22.8-10.9-1.7-108.4-15-158.6 20.7-26.2 18.6-31.6 53.9-53.6 84.3v-74.3c0-11.8-9.2-21.4-21-21.4s-21 9.5-21 21.4V253c0-24.5-25.2-48.9-45.8-63.5-50.2-35.8-147.5-21.6-158.4-20-11.6 1.8-19.6 14-17.8 25.6 1.6 10.7 17.2 100.8 67.7 142.8h0.1c27.2 22 68.4 22.8 102.1 22.8 23.4 0 52.2-3.6 52.2-4.8v132H213.3c-23.6 0-43.3 16.8-43.3 40.4V571c0 23.6 19.7 44.9 43.3 44.9h37.3L313.3 927c2.6 14.6 14.9 29.9 41.9 29.9h321.6c27 0 39.4-15.3 41.8-29.3L781.9 616H811c23.6 0 42.9-21.3 42.9-44.9v-42.7c0.1-23.6-19.2-40.4-42.8-40.4zM611.6 127c23.9-17 72.6-17.5 104.7-15-7.3 30-22.6 74.7-45.9 91.3-23.9 17-72.5 17.5-104.7 15 7.3-29.9 22.6-74.6 45.9-91.3z m-250 173.6c-23.5-16.8-38.6-61-46-91.3 31.8-2.4 81-1.9 104.7 15 23.6 16.8 38.6 61 46 91.3-31.7 2.4-81 1.9-104.7-15zM677.7 915H354.3l-60.2-299h444.3l-60.7 299zM811 573H213v-43h598v43z"
                fill="#ffffff"
                p-id="7611"
              ></path>
            </svg>
            <div>
              <div>{{ item.name }}</div>
              <!-- <div>{{ item.count }}人</div> -->
            </div>
          </div>
        </div>
      </el-scrollbar>
    </div>
    <div class="contentbox">
      <div class="left">
        <div class="title">湿度</div>
        <div id="contentleftechart" style="width: 100%; height: 100%"></div>
      </div>
      <div class="right">
        <div class="title">浇水量</div>
        <div id="contentrightechart" style="width: 100%; height: 100%"></div>
      </div>
    </div>
    <div class="footerbox">
      <div class="left">
        <div class="title">光照强度</div>
        <div id="footerleftechart" style="width: 100%; height: 100%"></div>
      </div>
      <div class="right">
        <div class="title">存活率</div>
        <div id="footerrightechart" style="width: 100%; height: 100%"></div>
      </div>
    </div>
  </div>
</template>

<script setup>
import * as echarts from "echarts";
import { onMounted, ref } from "vue";
import {
  getPlants,
  getPlantsinfo,
  getqueryCunHuo,
  getqueryJiaoShui,
  getquerySD,
} from "@/api/Dashboard";

const selected = ref(-1);
const plants = ref([]);
const result = ref([]);
const groupedData = ref({});
const isplants = ref(false);
let plantsname = [];
let savedata = [];

function getPlantsData() {
  getPlants().then((res) => {
    if (res.code == 200) {
      plants.value = res.plants.filter((it) => {
        if (it.name != null) {
          return it;
        }
      });
      isplants.value = true;

      plantsname = plants.value.map((it) => {
        return it.name;
      });
      if (plantsname.length > 5) {
        // 存活率
        let option4 = {
          // title: {
          //   text: "Basic Radar Chart",
          // },
          legend: {
            x: "right", //可设定图例在左、右、居中
            padding: [0, 50, 0, 0], //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
          },
          tooltip: {
            trigger: "item",
          },
          radar: {
            // shape: 'circle',
            indicator: [
              { name: "莲花", max: 6500 },
              { name: "清盛锦", max: 16000 },
              { name: "蒲公英", max: 30000 },
              { name: "草玉露", max: 38000 },
              { name: "露娜莲", max: 52000 },
              { name: plantsname[0], max: 25000 },
              { name: plantsname[1], max: 25000 },
              { name: plantsname[2], max: 25000 },
            ],
          },
          series: [
            {
              name: "Budget vs spending",
              type: "radar",
              data: [
                {
                  value: [4200, 0, 20000, 35000, 50000, 0,0,0],
                  name: "duxinlei",
                },
                {
                  value: [5000, 14000, 28000, 26000, 42000, 0,0,0],
                  name: "zhangsan",
                },
                {
                  value: [5000, 14000, 2800, 26000, 4000, 0,0,0],
                  name: "grb",
                },
              ],
            },
          ],
        };
        // 存活率
        let footerrightechart = echarts.init(
          document.getElementById("footerrightechart")
        );
        footerrightechart.setOption(option4, true);
      }

      // getqueryCunHuo().then((res) => {
      //   res.data.forEach((it) => {
      //     const username = it.username;
      //     // 如果groupedData中还没有这个用户名的键，则初始化一个空对象
      //     if (!savedata[username]) {
      //       savedata[username] = {
      //         usernames: username,
      //         survivalrates: [],
      //       };
      //     }
      //     savedata[username].survivalrates.push(it.survivalrate);
      //   });
      //   savedata = Object.values(savedata);
      //   console.log(savedata);
      //   getPerChart();
      // });
    }
  });
}

// 切换植物
function changeplant(name, id) {
  result.value = [];
  groupedData.value = [];
  if (selected.value === id) {
    selected.value = -1;
  } else {
    selected.value = id;
  }
  if (selected.value == -1) {
    getRhChart();
    getMlChart();
    getCdChart();
    getPerChart();
  } else {
    getPlantsinfo(name).then((res) => {
      res.data.forEach((item, index) => {
        // if (index <= 5) {
        const username = item.username;
        // 如果groupedData中还没有这个用户名的键，则初始化一个空对象
        if (!groupedData.value[username]) {
          groupedData.value[username] = {
            usernames: [],
            hums: [],
            survivalrates: [],
            wateringamounts: [],
            strengths: [],
            createtimes: [],
          };
        }

        // console.log();
        // if (Object.values(groupedData.value[username].usernames).length < 5) {
        // 将各项数据推入对应用户名的数组中
        groupedData.value[username].usernames.push(item.username);
        if (groupedData.value[username].hums.length < 11) {
          if (item.hum !== null) {
            groupedData.value[username].hums.push(item.hum);
          } else {
            groupedData.value[username].hums.push(0);
          }
        }
        if (groupedData.value[username].survivalrates.length < 11) {
          groupedData.value[username].survivalrates.push(item.survivalrate);
        }
        if (groupedData.value[username].wateringamounts.length < 11) {
          if (item.hum !== null) {
            groupedData.value[username].wateringamounts.push(
              item.wateringamount
            );
          } else {
            groupedData.value[username].wateringamounts.push(0);
          }
        }
        if (groupedData.value[username].strengths.length < 11) {
          if (item.hum !== null) {
            groupedData.value[username].strengths.push(item.strength);
          } else {
            groupedData.value[username].strengths.push(0);
          }
        }
        if (groupedData.value[username].createtimes.length < 11) {
          groupedData.value[username].createtimes.push(item.createtime);
        }
        // }

        // }
      });
      result.value = Object.values(groupedData.value);
      // console.log(result.value);

      getRhChart(result.value);
      getMlChart(result.value);
      getCdChart(result.value);
      getPerChart(result.value);
    });
  }
}
// 进入首页
// function enterplant() {
//   // getqueryCunHuo().then(res=>{
//   //   console.log(res.data);
//   // });
//   // getqueryJiaoShui();
//   // getquerySD();
// }

// echarts
function getRhChart(data) {
  if (data) {
    console.log(
      data.map((it) => {
        return {
          name: it.usernames[0],
          type: "line",
          data: it.hums,
        };
      })
    );

    // 湿度
    let option1 = {
      legend: {},
      tooltip: {
        trigger: "axis",
      },
      xAxis: {
        type: "category",
        // boundaryGap: false,
        data: data[0].createtimes ?? [
          "Mon",
          "Tue",
          "Wed",
          "Thu",
          "Fri",
          "Sat",
          "Sun",
        ],
      },
      yAxis: [
        {
          type: "value",
          axisLabel: { formatter: "{value} rh" },
        },
      ],
      legend: {
        x: "right", //可设定图例在左、右、居中
        padding: [0, 50, 0, 0], //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
      },
      series: data.map((it) => {
        return {
          name: it.usernames[0],
          type: "line",
          data: it.hums,
        };
      }),
    };
    // 湿度
    let contentleftechart = echarts.init(
      document.getElementById("contentleftechart")
    );
    contentleftechart.setOption(option1, true);
  } else {
    // 湿度
    let option1 = {
      legend: {},
      tooltip: {
        trigger: "axis",
      },
      xAxis: {
        type: "category",
        // boundaryGap: false,
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      },
      yAxis: [
        {
          type: "value",
          axisLabel: { formatter: "{value} rh" },
        },
      ],
      legend: {
        x: "right", //可设定图例在左、右、居中
        padding: [0, 50, 0, 0], //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
      },
      series: [
        {
          name: "duxinlei",
          type: "line",
          // stack: "Total",
          data: [120, 132, 101, 134, 90, 230, 210],
        },
        {
          name: "zhangsan",
          type: "line",
          // stack: "Total",
          data: [220, 182, 191, 234, 290, 330, 310],
        },
        {
          name: "grb",
          type: "line",
          // stack: "Total",
          data: [150, 232, 201, 154, 190, 330, 410],
        },
      ],
    };
    // 湿度
    let contentleftechart = echarts.init(
      document.getElementById("contentleftechart")
    );
    contentleftechart.setOption(option1);
  }
}

function getMlChart(data) {
  if (data) {
    // console.log(data);

    // console.log(
    //   data.map((it) => {
    //     return {
    //       name: it.usernames[0],
    //       type: "line",
    //       data: it.wateringamounts,
    //     };
    //   })
    // );
    let option2 = {
      // title: {
      //   text: "World Population",
      // },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
        },
      },
      legend: {
        x: "right", //可设定图例在左、右、居中
        padding: [0, 50, 0, 0], //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
      },

      yAxis: [
        {
          type: "value",
          axisLabel: { formatter: "{value} ml" },
        },
      ],
      xAxis: {
        type: "category",
        data: data[0].createtimes ?? ["day1", "day2", "day3", "day5", "day6"],
      },
      series: data.map((it) => {
        return {
          name: it.usernames[0],
          type: "bar",
          data: it.wateringamounts,
        };
      }),
    };
    // 浇水量
    let contentrightechart = echarts.init(
      document.getElementById("contentrightechart")
    );
    contentrightechart.setOption(option2, true);
  } else {
    let option2 = {
      // title: {
      //   text: "World Population",
      // },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
        },
      },
      legend: {
        x: "right", //可设定图例在左、右、居中
        padding: [0, 50, 0, 0], //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
      },

      yAxis: [
        {
          type: "value",
          axisLabel: { formatter: "{value} ml" },
        },
      ],
      xAxis: {
        type: "category",
        data: ["day1", "day2", "day3", "day5", "day6"],
      },
      series: [
        {
          name: "duxinlei",
          type: "bar",
          data: [18203, 23489, 29034, 34445, 1341],
        },
        {
          name: "zahngsan",
          type: "bar",
          data: [19325, 23438, 31000, 12345, 34512],
        },
        {
          name: "grb",
          type: "bar",
          data: [11325, 2438, 3100, 32543, 23453],
        },
      ],
    };
    // 浇水量
    let contentrightechart = echarts.init(
      document.getElementById("contentrightechart")
    );
    contentrightechart.setOption(option2, true);
  }
  // 浇水
}

function getCdChart(data) {
  if (data) {
    // 光照
    let option3 = {
      xAxis: {
        type: "category",
        data: data[0].createtimes ?? "",
      },
      yAxis: {
        type: "value",
        axisLabel: { formatter: "{value} %" },
      },
      legend: {
        x: "right", //可设定图例在左、右、居中
        padding: [0, 50, 0, 0], //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
      },
      tooltip: {
        trigger: "axis",
      },
      series: data.map((it) => {
        return {
          symbolSize: 20,
          name: it.usernames[0],
          type: "scatter",
          data: it.strengths,
        };
      }),
    };
    // 光照
    let footerleftechart = echarts.init(
      document.getElementById("footerleftechart")
    );
    footerleftechart.setOption(option3, true);
  } else {
    // 光照
    let option3 = {
      xAxis: {
        type: "category",
        data: "",
      },
      yAxis: {
        type: "value",
        axisLabel: { formatter: "{value} %" },
      },
      tooltip: {
        trigger: "axis",
      },
      legend: {
        x: "right", //可设定图例在左、右、居中
        padding: [0, 50, 0, 0], //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
      },
      series: [
        {
          symbolSize: 20,
          data: [
            [10.0, 3.04],
            [8.07, 4.95],
            [13.0, 7.58],
            [9.05, 8.81],
            [11.0, 5.33],
            [14.0, 7.66],
            [13.4, 6.81],
            [10.0, 5.33],
            [14.0, 8.96],
            [12.5, 6.82],
            [9.15, 6.2],
            [11.5, 7.2],
            [3.03, 4.23],
            [12.2, 7.83],
            [2.02, 7.47],
            [1.05, 3.33],
            [4.05, 8.96],
            [6.03, 7.24],
            [12.0, 3.26],
            [12.0, 8.84],
            [7.08, 5.82],
            [5.02, 5.68],
          ],
          type: "scatter",
          name: "duxinlei",
        },
        {
          symbolSize: 20,
          data: [
            [10.0, 8.04],
            [8.07, 6.95],
            [13.0, 9.58],
            [9.05, 8.81],
            [11.0, 8.33],
            [14.0, 7.66],
            [13.4, 4.81],
            [10.0, 6.33],
            [14.0, 8.96],
            [12.5, 6.82],
            [9.15, 7.2],
            [11.5, 2.2],
            [3.03, 4.23],
            [12.2, 7.83],
            [2.02, 4.47],
            [1.05, 3.33],
            [4.05, 2.96],
            [6.03, 7.24],
            [2.0, 6.26],
            [13.0, 1.84],
            [7.08, 0.82],
            [5.02, 5.68],
          ],
          type: "scatter",
          name: "zhangsan",
        },
        {
          symbolSize: 20,
          data: [
            [10.0, 8.04],
            [8.07, 6.95],
            [13.0, 7.58],
            [9.05, 8.81],
            [11.0, 8.33],
            [14.0, 7.66],
            [13.4, 6.81],
            [10.0, 6.33],
            [14.0, 8.96],
            [12.5, 6.82],
            [9.15, 7.2],
            [11.5, 7.2],
            [3.03, 4.23],
            [12.2, 7.83],
            [2.02, 4.47],
            [1.05, 3.33],
            [4.05, 4.96],
            [6.03, 7.24],
            [12.0, 6.26],
            [12.0, 8.84],
            [7.08, 5.82],
            [5.02, 5.68],
          ],
          type: "scatter",
          name: "grb",
        },
      ],
    };
    // 光照
    let footerleftechart = echarts.init(
      document.getElementById("footerleftechart")
    );
    footerleftechart.setOption(option3, true);
  }
}

function getPerChart(data) {
  // if (plantsname) {
  //   // console.log(savedata);
  //   const lengthdata = plantsname.length;

  //   const datavalue = savedata.map((it) => {
  //     const surdata = it.survivalrates;
  //     plantsname.forEach((it) => {
  //       if (surdata.length < lengthdata) {
  //         surdata.push(0);
  //       }
  //     });
  //     return {
  //       name: it.usernames,
  //       value: surdata,
  //     };
  //   });
  //   console.log(datavalue);

  //   // 存活率
  //   let option4 = {
  //     // title: {
  //     //   text: "Basic Radar Chart",
  //     // },
  //     legend: {
  //       x: "right", //可设定图例在左、右、居中
  //       padding: [0, 50, 0, 0], //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
  //     },
  //     tooltip: {
  //       trigger: "item",
  //     },
  //     radar: {
  //       // shape: 'circle',
  //       indicator: plantsname.map((it) => {
  //         return { name: it, max: 100 };
  //       }),
  //       //  [
  //       //   { name: "粽子好", max: 6500 },
  //       //   { name: "清盛锦", max: 16000 },
  //       //   { name: "蒲公英", max: 30000 },
  //       //   { name: "草玉露", max: 38000 },
  //       //   { name: "露娜莲", max: 52000 },
  //       //   // { name: "茼蒿", max: 25000 },
  //       // ],
  //     },
  //     series: [
  //       {
  //         name: "Budget vs spending",
  //         type: "radar",
  //         data: datavalue,
  //         // savedata.map((it) => {
  //         //   return {
  //         //     value: it.survivalrates,
  //         //     name: it.usernames,
  //         //   };
  //         // }),
  //       },
  //     ],
  //   };
  //   // 存活率
  //   let footerrightechart = echarts.init(
  //     document.getElementById("footerrightechart")
  //   );
  //   footerrightechart.setOption(option4, true);
  // } else {
  if (data) {
    // 存活率
    let option4 = {
      // title: {
      //   text: "Basic Radar Chart",
      // },
      legend: {
        x: "right", //可设定图例在左、右、居中
        padding: [0, 50, 0, 0], //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
      },
      tooltip: {
        trigger: "item",
      },
      radar: {
        // shape: 'circle',
        indicator:
          data[0].createtimes.map((it) => {
            return {
              name: it,
              max: 100,
            };
          }) ?? [],
        //  [
        //   { name: "绿萝", max: 6500 },
        //   { name: "白萝卜", max: 16000 },
        //   { name: "蒲公英", max: 30000 },
        //   { name: "白菜", max: 38000 },
        //   { name: "油菜", max: 52000 },
        //   { name: "茼蒿", max: 25000 },
        // ],
      },
      series: [
        {
          name: "Budget vs spending",
          type: "radar",
          data: data.map((it) => {
            return {
              name: it.usernames[0],
              value: it.survivalrates,
            };
          }),
          // [
          //   {
          //     value: [4200, 3000, 20000, 35000, 50000, 18000],
          //     name: "张三",
          //   },
          //   {
          //     value: [5000, 14000, 28000, 26000, 42000, 21000],
          //     name: "李四",
          //   },
          //   {
          //     value: [5000, 14000, 2800, 26000, 4000, 21000],
          //     name: "王五",
          //   },
          // ],
        },
      ],
    };
    // 存活率
    let footerrightechart = echarts.init(
      document.getElementById("footerrightechart")
    );
    footerrightechart.setOption(option4, true);
  } else {
    // 存活率
    let option4 = {
      // title: {
      //   text: "Basic Radar Chart",
      // },
      legend: {
        x: "right", //可设定图例在左、右、居中
        padding: [0, 50, 0, 0], //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
      },
      tooltip: {
        trigger: "item",
      },
      radar: {
        // shape: 'circle',
        indicator: [
          { name: "莲花", max: 6500 },
          { name: "清盛锦", max: 16000 },
          { name: "蒲公英", max: 30000 },
          { name: "草玉露", max: 38000 },
          { name: "露娜莲", max: 52000 },
          // { name: "茼蒿", max: 25000 },
        ],
      },
      series: [
        {
          name: "Budget vs spending",
          type: "radar",
          data: [
            {
              value: [4200, 0, 20000, 35000, 50000, 18000],
              name: "duxinlei",
            },
            {
              value: [5000, 14000, 28000, 26000, 42000, 21000],
              name: "zhangsan",
            },
            {
              value: [5000, 14000, 2800, 26000, 4000, 21000],
              name: "grb",
            },
          ],
        },
      ],
    };
    // 存活率
    let footerrightechart = echarts.init(
      document.getElementById("footerrightechart")
    );
    footerrightechart.setOption(option4, true);
  }
}
// }

onMounted(() => {
  // enterplant();
  getPlantsData();
  getRhChart();
  getMlChart();
  getCdChart();
  getPerChart();
});
</script>

<style lang="scss" scoped>
.plantactive {
  background-color: #ffa500 !important;
  // color: #34bfa3 !important;
}
.title {
  height: 100%;
  width: 20px;
  font-size: 20px;
}

.scrollbar-flex-content {
  display: flex;
}
.scrollbar-demo-item {
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: left;
  width: 200px;
  height: 130px;
  margin: 10px;
  border-radius: 4px;
  background-color: #34bfa3;
  color: rgb(255, 255, 255);
  font-size: 22px;
  &:nth-child(1) {
    margin-left: 0;
  }
  &:nth-last-child(1) {
    margin-right: 0;
  }
  svg {
    width: 50px;
    height: 50px;
    margin-right: 10px;
  }
}
.mainbox {
  width: 100%;
  height: 100%;
  .headerbox {
    box-sizing: border-box;
    // border: 1px solid black;
    height: 155px;
    margin-bottom: 5px;
    border-radius: 5px;
    // padding: 10px;
    // background-color: #eee;
  }
  .contentbox {
    box-sizing: border-box;
    // border: 1px solid black;
    height: 296px;
    margin-bottom: 10px;
    border-radius: 5px;
    // padding: 10px;
    display: flex;
    justify-content: space-between;
    .left,
    .right {
      display: flex;
      height: 100%;
      width: 49.5%;
      // background-color: #eee;
      box-sizing: border-box;
    }
  }
  .footerbox {
    box-sizing: border-box;
    // border: 1px solid black;
    height: 296px;
    margin-bottom: 10px;
    border-radius: 5px;
    // padding: 10px;
    display: flex;
    justify-content: space-between;
    .left,
    .right {
      display: flex;
      height: 100%;
      width: 49.5%;
      // background-color: #eee;
      box-sizing: border-box;
    }
  }
}
</style>
